<template>
        <div :style="background" class="bgBackground">
    
            <div class="login">
                <!--1.登录-->
                <div v-if="nowPannel == 'login'" class="pannel">
                    <!--标题-->
                    <div class="title">
                        <div>
                            欢迎登录
                        </div>
                        <div class="tips">
                            还没有账号，<text @click="changePannel('register')">立即注册</text>
                        </div>
                    </div>
                    <el-card class="card">
                        <!--表单部分-->
                        <el-input class="formItem" v-model="loginData.phone" placeholder="请输入手机号" />
                        <el-input class="formItem" type="password" v-model="loginData.upassword" password placeholder="请输入密码" />
                        <!--按钮-->
                        <button class="btn" @click="toLogin">登录</button>
                    </el-card>
        
                </div>
        
        
                <!--2.注册-->
                <div v-if="nowPannel == 'register'" class="pannel">
                    <div class="title">
                        <div>
                            注册
                        </div>
                        <div class="tips">
                            已有账号，<text @click="changePannel('login')">立即登录</text>
                        </div>
                    </div>
                    <!--表单部分-->
                    <el-card class="card">
                        <el-input class="formItem" v-model="registerData.username" placeholder="请输入姓名" />
                        <el-input class="formItem" v-model="registerData.phoneNumber" placeholder="请输入手机号" />
                        <el-input class="formItem" v-model="registerData.idNumber" placeholder="请输入身份证号" />
                        <el-input class="formItem" v-model="registerData.address" placeholder="请输入家庭住址" />
                        <el-input class="formItem" v-model="registerData.houseNumber" placeholder="请输入门牌号" />
                        <el-input class="formItem" v-model="registerData.password" password placeholder="请输入密码" />
                        <!--按钮-->
                        <button class="btn" @click="toRegister">注册</button>
                    </el-card>
        
                </div>
            </div>
        </div>
    
</template>

    <script>
import{loginApi} from "../api/index1.js";
import { ElMessage } from "element-plus";
export default {
    data() {
        return {
            background: {
                // 背景图片地址
                backgroundImage: 'url(' + require('../assets/1000.png') + ')',
                // 背景图片是否重复
                backgroundRepeat: 'no-repeat',
                // 背景图片大小
                backgroundSize: 'cover',
                // 背景颜色
                backgroundColor: '#000',
                // 背景图片位置
                backgroundPosition: 'center top'
            },
            //login register
            nowPannel: 'login',
            loginData: {
                upassword: "",
                phone: ""
            },
            registerData: {
                address: "",
                houseNumber: "",
                idNumber: "",
                password: "",
                phoneNumber: "",
                username: ""
            }
        }
    },
    methods: {
        //登录和注册野蛮切换
        changePannel(pannel) {
            this.nowPannel = pannel
        },
        toLogin(){
                  loginApi(this.loginData).then((res) => {
        console.log(res);
        this.formInline = {};
        // 2.提示用户添加成功
        if (res.code == 20000) {
          ElMessage({
            message: "登录成功",
            type: "success",
          });
        }
        //   this.$router.back()
        this.$router.push("../views/statistic");
        // this.passList = res.data.data;
        // console.log(this.passList)
      });
        }
        //用户登录
        // toLogin(){
        // 	//1.判断是否非空，如果为空，就提示用户，并不再执行后面代码
        // 	if(!(this.loginData.phoneNumber&&this.loginData.password)){
        // 		//提示用户填写完整信息
        // 		return uni.showToast({
        // 			title:"请完整填写内容",
        // 			icon:"error"
        // 		})
        // 	}

        // 	//登录
        // 	// console.log('登录')
        // 	uni.request({
        // 		url:"http://blog.coldworld.top:8081/user/login",
        // 		method:"POST",
        // 		data:this.loginData,
        // 		success: (res) => {
        // 			console.log(res.data.code)
        // 			if(res.data.code==20000){
        // 				//成功
        // 				//将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。							
        // 				uni.setStorageSync('id',res.data.data.id)
        // 				//把用户信息存到本地
        // 				uni.switchTab({
        // 					url:"/pages/index/index"
        // 				})
        // 			}else{
        // 				//失败
        // 				uni.showToast({
        // 					title:"登录失败",
        // 					icon:"error"
        // 				})
        // 			}
        // 		}
        // 	})
        // },
        // toRegister(){
        // 	if(!(this.registerData.username&&this.registerData.phoneNumber&&this.registerData.idNumber&&this.registerData.address&&this.registerData.houseNumber&&this.registerData.password)){
        // 		//提示用户填写完整信息
        // 		return uni.showToast({
        // 			title:"请完整填写内容",
        // 			icon:"error"
        // 		})
        // 	}
        // 	uni.request({
        // 		url:"http://blog.coldworld.top:8081/user/register",
        // 		method:"POST",
        // 		data:this.registerData,
        // 		success: (res) => {
        // 			// console.log(res)
        // 			if(res.data.code== 20000){
        // 				// 注册案例 aaa  aa 19980217551 123
        // 				console.log(res.data.message)
        // 				// this.loginData.phoneNumber=this.registerData.phoneNumber
        // 				// this.loginData.password=this.registerData.password
        // 				// this.registerData={}
        // 				uni.showToast({
        // 						title:res.data.message,
        // 						icon:"success",
        // 							})
        // 				this.nowPannel='login'
        // 				}else{
        // 				// 提示用户
        // 				return uni.showToast({
        // 				title:res.data.message,
        // 				icon:"error",
        // 									})
        // 					}
        // 		}
        // 	})
        // }
    }
}
</script>

    <style lang="less" scoped>
    .login {
        height: 720px;
        .pannel {
            padding: 0rpx 40rpx;
    
            .title {
                margin: 200rpx 0 100rpx;
                font-size: 40rpx;
                font-weight: bold;
    
                .tips {
                    color: #868686;
                    font-size: 25rpx;
                    font-weight: normal;
                    display: flex;
                    justify-content: right;
    
                    text {
                        color: #00aaff;
                    }
                }
            }
    
            .formItem {
                height: 100rpx;
                background-color: #ebeaee;
                margin-bottom: 40rpx;
                border-radius: 50rpx;
                padding-left: 40rpx;
            }
    
            .btn {
    
                background-color: #00557f;
                border-radius: 50rpx;
                color: white;
                text-align: center;
                font-weight: bold;
                display: flex;
                justify-content: center;
                margin-top: 20px;
            }
        }
    
        .el-input {
            margin-top: 20px;
            width: 300px;
            display: flex;
            flex-wrap: wrap;
        }
    }
    
    .card {
        width: 500px;
        display: flex;
        justify-content: center;
        margin-left: 300px;
        margin-top: 50px;
        background-color: rgb(13, 49, 85);
    }
    
    .bgBackground {
        width: 100%;
        height: 100%;        }
        
    </style>
